import { useMemo, useState } from 'react';

export default function Plans() {
  const [diagnosis, setDiagnosis] = useState('上呼吸道感染');
  const [allergy, setAllergy] = useState('无');
  const meds = useMemo(() => recommendMeds(diagnosis, allergy), [diagnosis, allergy]);

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">治疗与用药建议</h2>
      <div className="rounded-2xl bg-white p-4 shadow-sm space-y-3">
        <div className="grid grid-cols-2 gap-2 text-sm">
          <select value={diagnosis} onChange={(e) => setDiagnosis(e.target.value)} className="rounded-xl border px-3 py-2">
            {['上呼吸道感染', '急性支气管炎', '胃炎', '皮炎'].map(d => <option key={d}>{d}</option>)}
          </select>
          <input value={allergy} onChange={(e) => setAllergy(e.target.value)} placeholder="过敏史，如青霉素" className="rounded-xl border px-3 py-2" />
        </div>
        <div className="text-sm text-gray-600">以下为通用科普性质建议，非处方，请在医生指导下使用。</div>
      </div>

      <div className="rounded-2xl bg-white p-4 shadow-sm">
        <div className="font-medium mb-2">建议用药</div>
        <ul className="space-y-2 text-sm">
          {meds.map((m, i) => (
            <li key={i} className="rounded-xl border bg-gray-50 p-3">
              <div className="font-medium text-gray-900">{m.name}</div>
              <div className="text-gray-600">用法用量：{m.dose}</div>
              <div className="text-gray-600">注意事项：{m.notes}</div>
            </li>
          ))}
        </ul>
      </div>

      <div className="rounded-2xl bg-white p-4 shadow-sm">
        <div className="font-medium mb-2">生活方式与注意事项</div>
        <ul className="list-disc pl-5 text-sm text-gray-700 space-y-1">
          <li>充分休息，保证睡眠与水分摄入。</li>
          <li>清淡饮食，避免辛辣油腻与酒精。</li>
          <li>若症状加重或持续不缓解，尽快线下就诊。</li>
        </ul>
      </div>
    </div>
  );
}

function recommendMeds(diagnosis: string, allergy: string) {
  const a = allergy.toLowerCase();
  const avoid = (name: string) => a && name.toLowerCase().includes(a);
  const meds = {
    上呼吸道感染: [
      { name: '对乙酰氨基酚片', dose: '0.5g/次，必要时，每4-6小时一次', notes: '肝功能异常者慎用' },
      { name: '布洛芬', dose: '200mg/次，每8小时一次，随餐', notes: '胃溃疡患者慎用' },
      { name: '复方氨酚烷胺', dose: '说明书剂量', notes: '注意嗜睡' },
    ],
    急性支气管炎: [
      { name: '氨溴索', dose: '30mg/次，每日2-3次', notes: '多饮水有助排痰' },
      { name: '右美沙芬', dose: '说明书剂量', notes: '干咳为主时可用' },
    ],
    胃炎: [
      { name: '奥美拉唑', dose: '20mg 每日一次，晨起空腹', notes: '短期用药' },
      { name: '枸橼酸铋钾', dose: '说明书剂量', notes: '幽门螺杆菌治疗方案组成' },
    ],
    皮炎: [
      { name: '氯雷他定', dose: '10mg 每日一次', notes: '嗜睡少见' },
      { name: '炉甘石洗剂', dose: '外用，瘙痒时涂抹', notes: '避免破溃处' },
    ],
  } as const;
  // filter by allergy keyword simply
  return meds[diagnosis as keyof typeof meds].filter(m => !avoid(m.name));
}


